<style scoped>
  .page-title{
    text-align: center;
    padding: 2vw;
  }
  .apply-title {
    text-align: center;
    font-size: 5vw;
    word-break: break-all;
    padding: 2vw 0;
    margin-top: 3vh;
  }

  .apply-wrap {
    margin: 4vw 2vw;
    border: gray 2px dashed;
    border-radius: 2vw;
    position: relative;
  }

  .apply-header {
    position: absolute;
    height: 4vh;
    top: -2vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: white;
    margin-left: 5vw;
    padding: 0 2vw;
    border-radius: 2vw;
    font-weight: bold;
  }

  .input-wrap {
    padding: 4vw 7vw;
  }

  .input-item.van-cell.van-field {
    border-radius: 2vw;
    margin: 2vh 0;
  }

  .img-title {
    font-size: 4vw;
    padding-bottom: 1vh;
  }
  .apply-submit {
    text-align: center;
    padding: 1vw;
    border-radius: 1vw;
  }
</style>
<template>
  <div v-if="mainData!=null">
    <div :style="{color: (mainData.page.font_color+'!important'),background:mainData.page.background_color}">
      <div :style="{color: (mainData.page.btn_font_color+'!important'),background:mainData.page.btn_color}"
           class="page-title">活动报名
      </div>
      <div class="apply-wrap" :style="{'border-color':mainData.page.btn_color}">
        <span class="apply-header" :style="{color:mainData.page.btn_color}">信息填写</span>
        <div class="apply-title">{{mainData.title}}报名</div>
        <div class="input-wrap">
          <van-field class="input-item" v-model="applyName" :placeholder="'输入您的'+mainData.apply.player_name"/>
          <van-field class="input-item" v-model="applyDesc" :placeholder="'输入您的参赛'+mainData.apply.desc"/>
          <van-field v-for="item in otherFields" class="input-item" v-model="item.value"
                     :placeholder="'输入您的'+item.name"/>
          <div class="img-title">上传{{mainData.apply.img_name}}</div>
          <upload :max-count="mainData.apply.max_imgs" v-model="imgList"></upload>
          <van-field rows="4"
                     autosize
                     type="textarea"
                     maxlength="400"
                     class="input-item" v-model="applySlogan" :placeholder="'输入您的'+mainData.apply.slogan"/>
          <div @click="submit" class="apply-submit" :style="{color: (mainData.page.btn_font_color+'!important'),background:mainData.page.btn_color}">提交报名</div>
        </div>
      </div>
    </div>
	  <van-overlay :show="showGzh" @click="showGzh = false" >
		  <div style="width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;">
			  <img style="width: 60vw;" class="gzh-img" :src="GLOBAL.getUrl(mainData.gzh_img[0])">
		  </div>
	  </van-overlay>
  </div>
</template>
<script>
  import upload from '@/components/Upload.vue'
  import { isNull,getTrueImg } from '@/libs/util'
  import { getActive } from '@/api/active'
  import { apply ,hasJoin} from '@/api/play'

  export default {
    name: 'apply',
    data () {
      return {
        baseImgUrl: null,
        id: null,
        mainData: null,
        applyName: null,
        applyDesc: null,
        applySlogan: null,
        otherFields: [],
        imgList: [],
        showGzh:false
      }
    },
    components: { upload },
    created () {
      this.id = sessionStorage.getItem('active_id')
      this.check();
      this.initData()

    },
    methods: {
      check(){
        let vm = this;
        hasJoin(this.id).then(rep=>{
          if(rep.data.data){
            vant.Dialog.alert({
              title: '提示',
              message: '您已经参加过了'
            }).then(() => {
              vm.$router.push({name:'player',query:{pid:rep.data.data.id}})
            });
          }
        })
      },
      initData () {
        try {
          let mainData = this.GLOBAL.getMainData()
          if (mainData == null || !mainData) {
            this.getData()
          } else {
            this.mainData = mainData
            this.setData()
          }
        } catch (e) {
          this.getData()
        }
      },
      setData () {
        this.baseImgUrl = this.mainData.siteConfig.baseImgUrl
        if (this.mainData.apply.other_field != null) {
          let vm = this
          vm.otherFields = []
          let otherFields = this.mainData.apply.other_field.split(',')
          otherFields.forEach(v => {
            vm.otherFields.push({ name: v, value: null })
          })
        }
      },
      getData () {
        let vm = this
        getActive(this.id).then(rep => {
          vm.mainData = rep.data.data
          vm.GLOBAL.setMainData(vm.mainData)
        })
      },
      submit(){
        if((this.mainData.rule.need_subscribe === this.GLOBAL.ruleConst.RULE_SUBSCRIBE_NEED_BEFORE_APPLY||this.mainData.rule.need_subscribe === this.GLOBAL.ruleConst.RULE_SUBSCRIBE_NEED_BEFORE_VOTE_AND_APPLY)
          &&this.mainData.wxInfo.subscribe==0){
          vant.Toast('请先关注公众号');
          this.showGzh = true;
          return;
        }
        let params = {'aid':this.id};
        if(isNull(this.applyName)){
          vant.Toast('请输入参赛名称');
          return;
        }
        if(isNull(this.applyDesc)){
          vant.Toast('请输入简介');
          return;
        }
        if(this.imgList.length<1){
          vant.Toast('请上传照片');
          return;
        }
        params.player_name = this.applyName;
        params.desc = this.applyDesc;
        params.slogan = this.applySlogan;
        if(this.otherFields.length>0){
          params.other_fields = this.otherFields;
        }
        params.imgs = getTrueImg(this.imgList);
        apply(params).then(rep=>{
          vant.Toast('报名成功');
          this.$router.push({name:'home'});
        })
      }
    }
  }
</script>
